<template>
	<view class="goods-manage">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="goods-bd">
			<gyd-tabs :list="tabsList" @clickItem="changeTab"></gyd-tabs>

			<view class="goods-list">
				<view class="goods-item" v-for="(item,index) in goodsList" :key="index">
					<view class="inner">
						<image class="thumb" :src="$imageUrl(item.logo)" mode="aspectFill"></image>
						<view class="info">
							<view class="info-main">
								<view class="info-item">
									<view class="name">{{item.name}}</view>
									<view class="line">
										<view class="stock line-1">供货价：{{item.cost_price}}</view>
										<view class="stock line-2">本地售价：{{item.sale_price}}</view>
									</view>
									<view class="line">
										<view class="stock line-1" v-if="item.shop_type===2">配送：
											<text class="stock" v-if="item.delivery_type===1">包含配送</text>
											<text class="stock" v-if="item.delivery_type===2">不含配送</text>
											<text class="stock" v-if="item.delivery_type===3">配送+自提</text>
										</view>
										<view class="stock line-2"
											v-if="item.shop_type===2 && (item.delivery_type===1 || item.delivery_type===3)">
											配送费：{{item.delivery_price}}</view>
									</view>
									<view class="stock">库存：{{item.stock}}</view>
								</view>
								<view class="info-status" v-if="item.status===1">
									<text v-if="item.on_sale===1">上架</text>
									<text v-if="item.on_sale===0">下架</text>
								</view>
								<view class="info-status" v-if="item.status===0">
									<text style="color: #ffaa00;">待审</text>
								</view>
								<view class="info-status" v-if="item.status===2">
									<text style="color: red;">驳回</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.status==2" style="color: red;">审核意见：{{item.audit_opinion}}</view>
					<view class="btn-group">
						<u-button type="warning" class="btn-item" size="mini" plain v-if="item.status != 1"
							@click="toEdit(item.id, 'update')">修改信息</u-button>
						<u-button type="success" class="btn-item" size="mini" plain
							@click="toEdit(item.id, 'copy')">快速复制</u-button>
						<u-button type="warning" class="btn-item" size="mini" plain @click="del(item)">删除商品</u-button>
						<u-button type="error" class="btn-item" size="mini" plain
							v-if="item.status == 1 && item.on_sale == 1" @click="offFun(item)">下架</u-button>
						<u-button type="primary" class="btn-item" size="mini" plain
							v-if="item.status == 1 && item.on_sale == 0" @click="onFun(item)">上架</u-button>
					</view>
				</view>
				<view class="empty-data" v-if="goodsList.length===0">暂无商品信息</view>
			</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block @click="addGoods()">新建商品</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商品管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		params: {
			current: 0,
			store_id: 0,
			shop_type: 0,
			status: -1,
			on_sale: -1,
			skip: 0,
		},
		tabsList: ['全部', '待审核', '已通过', '被驳回', '售卖中', '已下架'],
		isMore: true,
		goodsList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		let selStore = cache.get('selStore');
		console.log('当前店铺', selStore);
		if (selStore) {
			state.params.store_id = selStore.id;
			state.params.shop_type = selStore.user_type;
		}
		getGoodsList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.goodsList = [];
		getGoodsList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getGoodsList();
	})

	function getGoodsList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		state.params.skip = state.goodsList.length;
		request.get('merchant.product/goodsList', state.params).then(res => {
			console.log('商品列表', res);
			state.isMore = res.data.is_more;
			if (state.goodsList.length == 0) {
				state.goodsList = res.data.data;
			} else {
				state.goodsList = state.goodsList.concat(res.data.data);
			}
		})
	}

	function changeTab(index) {
		state.params.current = index;
		state.isMore = true;
		state.goodsList = [];
		getGoodsList();
	}

	function addGoods() {
		if (state.params.shop_type == 1) {
			// 联盟商家
			pageRoute(`/merchantPages/goods-manage/shop-goods-form`);
		} else if (state.params.shop_type == 2) {
			// 水站商家
			pageRoute(`/merchantPages/goods-manage/water-goods-form`);
		} else {
			util.showTip('系统异常，请联系客服');
		}
	}

	function toEdit(id, flag) {
		if (state.params.shop_type == 1) {
			// 联盟商家
			pageRoute(`/merchantPages/goods-manage/shop-goods-form?id=${id}&flag=${flag}`);
		} else {
			// 水站商家
			pageRoute(`/merchantPages/goods-manage/water-goods-form?id=${id}&flag=${flag}`);
		}
	}

	function del(item) {
		uni.showModal({
			title: '提示',
			content: '确定要删除' + item.name + '吗？',
			showCancel: true,
			success: ({
				confirm,
				cancel
			}) => {
				if (confirm) {
					request.post('goods/del', {
						goods_id: item.id,
					}).then(res => {
						util.showTip(res.msg);
						if (res.code == 1) {
							setTimeout(() => {
								state.isMore = true;
								state.goodsList = [];
								getGoodsList();
							}, 1000);
						}
					})
				}
			}
		})
	}

	function offFun(item) {
		uni.showModal({
			title: '提示',
			content: '确定要下架吗？',
			showCancel: true,
			success: ({
				confirm,
				cancel
			}) => {
				if (confirm) {
					request.post('goods/setSaleStatus', {
						id: item.id,
						on_sale: 0
					}).then(res => {
						util.showTip(res.msg);
						if (res.code == 1) {
							setTimeout(() => {
								state.isMore = true;
								state.goodsList = [];
								getGoodsList();
							}, 1000);
						}
					})
				}
			}
		})
	}

	function onFun(item) {
		uni.showModal({
			title: '提示',
			content: '确定要上架吗',
			showCancel: true,
			success: ({
				confirm,
				cancel
			}) => {
				if (confirm) {
					request.post('goods/setSaleStatus', {
						id: item.id,
						on_sale: 1
					}).then(res => {
						util.showTip(res.msg);
						if (res.code == 1) {
							setTimeout(() => {
								state.isMore = true;
								state.goodsList = [];
								getGoodsList();
							}, 1000);
						}
					})
				}
			}
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		params,
		tabsList,
		isMore,
		goodsList,
	} = toRefs(state);
</script>

<style lang="scss">
	.goods-manage {
		background-color: #fff;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.goods-bd {
			.goods-list {
				padding: $m24;

				.goods-item {
					padding: $m20;
					border-bottom: 1rpx solid $border-color;

					&:last-child {
						border-bottom: none;
					}

					.inner {
						@include f-between($align: center);

						.thumb {
							width: 140rpx;
							height: 140rpx;
							background-color: #F7F7FB;
							border-radius: $radius-8;
						}

						.info {
							position: relative;
							flex: 1;
							margin-left: $m24;

							.info-main {
								display: flex;
								justify-content: space-between;

								.info-item {
									.name {
										@include ellipsis;
										font-size: $font-32;
										color: $main-color;
										font-weight: 500;
									}

									.line {
										display: flex;
										justify-content: space-between;

										.line-1 {
											width: 220rpx;
										}

										.line-2 {
											flex: 1;
										}
									}

									.stock {
										margin-top: $m8;
										font-size: $font-24;
										color: $tips-color;
									}
								}

								.info-status {
									width: 80rpx;
									height: 46rpx;
									text-align: center;
									background-color: mix($white-color, $primary-color, 84%);
									border-radius: $radius-16;
									border-bottom: 1rpx solid $border-color;

									text {
										font-size: $font-22;
									}
								}
							}

							.other {
								@include f-between($align: center);
								bottom: 0;
								width: 100%;

								.price {
									.value {
										font-size: $font-32;
										color: $primary-color;
										font-weight: bold;
									}

									.unit {
										font-size: $font-24;
										color: $tips-color;

										&.prefix {
											color: $primary-color;
											font-weight: bold;
										}
									}
								}
							}
						}
					}

					.btn-group {
						display: flex;
						justify-content: flex-end;
						margin-top: $m12;

						.btn-item {
							width: 100rpx;
						}
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>